# Button

<Subtitle>
  A button component that can be rendered as another tag or focusable when disabled.
</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React button component that can be rendered as another tag or focusable when disabled."
/>

import { DemoButtonHero } from './demos/hero';

<DemoButtonHero />

## Anatomy

Import the component:

```jsx title="Anatomy"
import { Button } from '@base-ui-components/react/button';

<Button />;
```

## Examples

### Rendering as another tag

The button can remain keyboard accessible while being rendered as another tag, such as a `<div>`, by specifying `nativeButton={false}`.

```jsx title="Custom tag button" "nativeButton"
import { Button } from '@base-ui-components/react/button';

<Button render={<div />} nativeButton={false}>
  Button that can contain complex children
</Button>;
```

### Loading states

For buttons that enter a loading state after being clicked, specify the `focusableWhenDisabled` prop to ensure focus remains on the button when it becomes disabled. This prevents focus from being lost and maintains the tab order.

import { DemoButtonLoading } from './demos/loading';

<DemoButtonLoading compact />

## API reference

<Reference component="Button" />
